<template>
  <div>
    <!-- 地址 -->
    <div class="box">
      <div class="head">
        <el-row>
          <el-col :span="4">
            <el-input v-model="id" placeholder="请输入用户ID"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input v-model="name" placeholder="请输入收货人名称"></el-input>
          </el-col>
          <el-col :span="5">
            <el-button type="primary" icon="el-icon-search" @click="view">查看</el-button>
            <el-button type="primary" icon="el-icon-download" @click=" handleDownload" >导出</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="table">
        <el-table :data="tableData"  align="center"  border style="width: 100%" >
          <el-table-column prop="id" sortable label="地址ID" width="180">
          </el-table-column>
          <el-table-column prop="userId" label="用户ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="收货人"> </el-table-column>
          <el-table-column prop="tel" label="手机号码"> </el-table-column>
          <el-table-column  label="区域地址">
                <template v-slot="scope">
                  {{ scope.row.province }}{{ scope.row.city }}{{ scope.row.county }}
                </template>  
          </el-table-column>
          <el-table-column  label="详细地址" prop="addressDetail">
          </el-table-column>
          <el-table-column prop="isDefault" label="默认">
              <template v-slot="scope">
          
                  <p v-if="scope.row.isDefault" >否</p> 
                  <p v-else >否</p> 
              </template>  
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="foot" >
      <paging :total="total" :page="pageData.page" @size="Eachpage" @page="currentPage" ></paging>
    </div>
  </div>
</template>


<script>
import {list} from "../../api/address.js"
import paging from "../../utils/paging.vue"
export default {
  components : {
    paging
  },
  data() {
    return {
      id: "",
      name: "",
      tableData:[],
      pageData: {
        page: 1 ,
        limit: 20,
        sort: "add_time",
        order: "desc"

      },
      total : 20
    };
  },

  mounted() {},
  created() {
    this.listData()
  },

  methods: {
    // 导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['用户ID', '商品ID', '添加时间']
        const filterVal = ['userId', 'valueId', 'addTime']
        excel.export_json_to_excel2(tHeader, this.list, filterVal, '用户收藏信息')
        this.downloadLoading = false
      })
    },
    // 查看
    view() {
      list({
        ...this.tableData,
        userId: this.id,
        name: this.name
      }).then(res => {
        console.log(res);
        this.tableData = res.data.data
        
      })
    },
    // 渲染页面
    listData(){
      list(this.pageData).then(res => {
        console.log(res);
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        
      })
    },
    // 每页几条
    Eachpage(val) {
      // console.log(val);
      this.pageData.page = 1
      this.pageData.limit = val
      this.listData()
      
    },
    // 当前页数
    currentPage (val) {
      // console.log(val);
      this.pageData.page =val
      // console.log(this.pageData.page);
      
      this.listData()
      
    }

  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}
.table {
  margin-top: 40px;
  text-align: center;
}
::v-deep .el-table th {
  text-align: center !important;
}
::v-deep .el-table tr td {
  text-align: center !important;
}
</style>